<div class="box_820_cap">
<div class="box_820_shoe">

<h2 class="orange" title="Place An Ad">Place An Ad</h2>

<div class="box_identify"><p>You are logged in as <a href="/myads/"><?= $user_values['email'] ?></a> &nbsp;|&nbsp;  <a href="/myads/do.logout.php">Logout &rsaquo;</a></p></div>

<ul class="step_list">
    <li class="step_item_1_on">Step 1 - Advert Details</li>
    <li class="step_item_2_off">Step 2 - Upload Photos</li>
    <li class="step_item_3_off">Step 3 - Preview Advert</li>
<? if($_SESSION['advert']['type'] == "new"){ ?>
    <li class="step_item_4_off">Step 4 - Payment</li>
<? } ?>
</ul>

<div class="clearing"></div>


<!-- Start left col -->
<div class="col_580 margin_right_20">

<div class="box_grey_580_cap">
<div class="box_grey_580_shoe">




<form method="post" action="<?= $_SERVER['PHP_SELF'] ?>" name="detailsform">

<input type="hidden" name="action" value="step_2" />
<input type="hidden" name="form_submitted" value="true" />





<h3 class="orange" title="Advert Details">Advert Details</h3>


<h3 title="Advert Details">Advert Details</h3>




<? display_message($message); ?>





<table class="libra">

<?

if(($form_values['ad_type_group']=='lost')){

?>

<tr>
    <td><label>Lost/Found:</label></td>
    <td>
<select name="ad_type" class="form_create_opt_long">
    <option value=''>Please select</option>
    <option value="l" <?= selected($form_values['ad_type'],'l') ?> >Lost</option> 
    <option value="f" <?= selected($form_values['ad_type'],'f') ?> >Found</option>
</select>

    </td>
</tr>


<tr>
    <td><label>Date lost/found:</label></td>
    <td><?
	
	if($form_values['date_lf']){
	
		$timestamp = $form_values['date_lf'];
	
		$y = date('Y',$timestamp);
		$m = date('m',$timestamp);
		$d = date('d',$timestamp);
		
	}else{
	
		$y = date('Y');
		$m = date('m');
		$d = date('d');
		
	}


	$start_year = date('Y')-1;
	$end_year = date('Y');
	
	?>
	
	
	<link href="/css/datepicker/picker.css" rel="stylesheet" type="text/css" />
	<script src="/includes/picker.js" language="javascript" type="text/javascript"></script>	
	<script src="/includes/json.js" language="javascript" type="text/javascript"></script>
	<script type="text/javascript">
	$(function() {
		
		try {		
		var i_d = $('#date-select-box :input[name=date_lf_day]').val();
		var i_m = $('#date-select-box :input[name=date_lf_month]').val() - 1;
		var i_y = $('#date-select-box :input[name=date_lf_year]').val();
		
	    $("#datepicker").val(i_d + '.' + i_m + '.' + i_y);
		}catch(e){}
		
		$("#datepicker").datepicker({
			showOn: 'button',
			buttonImage: '/images/icon_calendar.gif',
			buttonImageOnly: true,
			buttonText: 'Date picker', //'alt' and 'title' attributes
			defaultDate: new Date(i_y, i_m, i_d), 			
			minDate: new Date(<?= $start_year ?>, 0,  1), //minimum date range for selection
			maxDate: '+0', //'now' date is the upper limit for date selections
			dateFormat: 'dd.mm.yy',
			
			onSelect: function(dateText) {				
				var d =	dateText.split('.');			

				$('#date-select-box .select_day').children('[value=' + d[0] + ']').attr('selected', 'selected');
				$('#date-select-box .select_month').children('[value=' + d[1] + ']').attr('selected', 'selected');
				$('#date-select-box .select_year').children('[value=' + d[2] + ']').attr('selected', 'selected');
			},
			
			//updates calendar 'start' date
			beforeShow: function(input) {				
				var d =	input.value.split('.');				
				$("#datepicker").datepicker('setDate', new Date(d[2], d[1], d[0]));
			}
		});
		
		
	    $.ajaxSetup({
	        async: true,
	        global: true,
	        type: "POST",
	        url: "../ajax.php",
	        dataType: "json",
	        error: function (XMLHttpRequest, textStatus, errorThrown) {	            
	        },        
	        cache: false
	    });		
		
	    function overTransform(obj) {
	        $.ajax({
	            beforeSend: function(XMLHttpRequest){
	                var dim = $(obj.target).offset({
	                    border:true
	                });
	                $('<div id="over1"><img src="/images/ajax_loader.gif" alt="loading"/></div>').appendTo(document.body)
	                .css({
	                    position:'absolute',
	                    top:dim.top,
	                    left:dim.left,
	                    backgroundColor:'#000',
	                    width:$(obj.target).outerWidth(),
	                    height:$(obj.target).outerHeight()
	                });
	            },
	            data: JSON.stringify(obj.sendData),
	            success: function (data, textStatus) {
	                obj.transform(data, JSON.parse(this.data), obj.target);
	            },
	            complete: function (XMLHttpRequest, textStatus) {
	                $('#over1').remove();
	            }
	        });
	    }

	    $('#date-select-box :input').change(function(e){
	        if (this.name == 'date_lf_month' || this.name == 'date_lf_year') {
	            var dmy_data = {
	                day:   $("#date-select-box :input[name=date_lf_day]").val(),
	                month: $("#date-select-box :input[name=date_lf_month]").val(),
	                year:  $("#date-select-box :input[name=date_lf_year]").val()
	            };
	
	            overTransform({
	                target:$("#date-select-box :input[name=date_lf_day]").get(0),
	                sendData: {	                    
	                    target:'getDays',
	                    indata:dmy_data
	                },
	                transform: function(response, request, element) {
	                    element.options.length = 0;
	                    for(var i=1; i<=response; i++) {
	                        element.options[element.options.length] = new Option(i, i, false, false);
	                    }
	                    try {
	                        element.options[request.indata.day-1].selected = true;
	                    }catch(e){}
	                }
	            });
					
	        }
	        
           var d = $("#date-select-box :input[name=date_lf_day]").val();
	       var m = $("#date-select-box :input[name=date_lf_month]").val();
	       var y = $("#date-select-box :input[name=date_lf_year]").val();
	       
	       var date_str = d + '.' + m + '.' + y;
	       $("#datepicker").val(date_str);	        
	    });				
		
		
	});
	</script>
<div id="date-select-box">
<div style=" float: left; margin-right: 5px;">
<?
	//day
	echo "<select name='date_lf_day' class=\"select_day\">";
	
		for($i='1'; $i <= '31'; $i++){
			
			if($i < '10')$i = "0".$i;
	
			echo"<option value='".$i."' ".selected($d,$i).">".$i."</option>\n";
	
		}
	
	echo "</select>";
?>

<?
	//month
	echo "<select name='date_lf_month' class=\"select_month\">";
	
		for($j='1'; $j <= '12'; $j++){
		
			if($j < '10')$j = "0".$j;
			
			$timestamp = mktime(0, 0, 0, $j, 10, 2000);
		
			$option_display =  date('M', $timestamp);
			
			echo "<option value='".$j."' ".selected($m,$j).">".$option_display."</option>\n";
			
		}
		
		
	echo "</select>";
?>

<?	
	//year
	echo "<select name='date_lf_year' class=\"select_year\">";
	
		for($k=$start_year; $k <= $end_year; $k++){
		
			echo"<option value='".$k."' ".selected($y,$k).">".$k."</option>\n";
			
		}
	echo "</select>";    
?>
</div>
<div style="float: left; vertical-align: bottom; width: 19px;"><input type="hidden" id="datepicker"  /></div>
</div>
    </td>
</tr>


<? }elseif($form_values['ad_type_group']=='home'){ ?>

<script type="text/javascript">
$(function() {
	
	$('#ad_type').change(function(e) {
		if ( $(this).val() == 's' ) {
			$('#pricediv').show();
		} else {
			$('#pricediv').hide();
		}
	});

});
</script>


<tr>
<td width="150"><label>Ad type:</label></td>
<td>
<select name="ad_type" id="ad_type" class="form_create_opt_long">
    <option value="">Please select</option>
    <option value="s" <?= selected($form_values['ad_type'], 's') ?>>For Sale</option>
    <option value="h" <?= selected($form_values['ad_type'], 'h') ?>>For Good Home</option>
</select>
</td>
</tr>


<? }elseif($form_values['ad_type_group']=='wanted'){ ?>

<tr>
<td width="150"><label>Ad type:</label></td>
<td>
<select class="form_create_opt_long" disabled="disabled">
<option>Wanted</option>
</select>
<input type="hidden" name="ad_type" value="w" />
</td>
</tr>

<? } ?>

<tr>
<td width="150"><label>Pet type:</label></td>

<td>
<select name="pet_type_id" class="form_create_opt_long">
    <option value=''>Please select</option>
<?
	$pet_types_values = $pet_types->get_pet_types();
	foreach($pet_types_values as $value){
?>	
    <option value="<?= $value['pet_type_id'] ?>" <?= selected($value['pet_type_id'], $form_values['pet_type_id']) ?>><?= $value['name'] ?></option>
<?	
	}
?>
</select>
</td>
</tr>


<tr>
<td><label>County:</label></td>
<td>
<?

	if($form_values['ad_type']=='l'){
		if(!$form_values['location_id']) $location_select_alt = "Please select where the animal was lost";
	}elseif($form_values['ad_type']=='f'){
		if(!$form_values['location_id']) $location_select_alt = "Please select where the animal was found";
	}elseif(($form_values['ad_type']=='s')OR($form_values['ad_type']=='h')){
		if(!$form_values['location_id']) $location_select_alt = "Please select where the animal(s) is in or can be viewed at";
	}elseif($form_values['ad_type']=='w'){
		if(!$form_values['location_id']) $location_select_alt = "Please select where you are located";
	}


?>
<select id="location-menu" name="location_id" class="form_create_opt_long" >
	<option value=''>Please select</option><?	
	
    $location_values = $locations->get_locations();
	
	foreach($location_values as $value){
	
?><option value='<?= $value['location_id'] ?>' lat='<?= $value['latitude'] ?>' lon='<?= $value['longitude']?>' <?= selected($form_values['location_id'],$value['location_id']) ?> ><?= $value['location'] ?></option><?
	
	}
?>
</select></td>
</tr>

<?
if(($form_values['ad_type_group'] == 'lost')){
?>

<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=<?= GMAP_KEY ?>"   type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){

	if (GBrowserIsCompatible()) {
	
		var map = new GMap2($("#gmap").get(0));
		var irlLatLng = new GLatLng(53.5, -8);
		var controlOverview = new GOverviewMapControl();
		var controlControls = new GLargeMapControl3D();
		
		// Only allow zoom to 6
		var mt = map.getMapTypes(); 
		     
		for (var i=0; i<mt.length; i++) {
		  mt[i].getMinimumResolution = function() {return 6;}	          
		}

		// Create Icon
        var pawIcon = new GIcon(G_DEFAULT_ICON);
        pawIcon.image = "http://www.pets.ie/images/GMAPI_marker.png";
        pawIcon.iconSize = new GSize(33, 32);
        pawIcon.shadow = "http://www.pets.ie/images/GMAPI_marker_shadow.png";
        pawIcon.shadowSize = new GSize(33, 32);
        pawIcon.imageMap = [2,7,16,1,30,7,30,13,27,16,27,29,5,29,5,16,2,13];
		// pawIcon.transparent = "http://www.pets.ie/images/GMAPI_marker_IE_area.png";
        pawIcon.iconAnchor = new GPoint(17, 29);
        pawIcon.infoWindowAnchor = new GPoint(17, 0);	
		var markerOptions = { icon: pawIcon, draggable: true };
		
		var lat = $('#latitude').val();
		var lon = $('#longtitude').val();
		var markerLatLng = null;

		var selectLocMsg = "<p style='margin:0;padding:0'><strong class='orange'>Select a county</strong><br/>Please select a county before marking<br/> the exact location on the map.";
		var dragMsg = "<p style='margin:0;padding:0'><strong class='orange'>Drag the paw print</strong><br/>Please drag the paw print to the exact location<br/> you last saw or found the animal.</p>";
		var saveMsg = "<p style='margin:0;padding:0'><strong class='orange'>Your marker will be saved here</strong><br><strong>Zoom in closer</strong> using the controls on the left<br/>and <strong>drag the paw print</strong> to the exact location.</p>"
		
		//location menu
		$('#location-menu').change(function(e){
			var sel = $(e.target).get(0);			
			try {		
				var loc_id = $(sel).val();
				if (loc_id != '') {	// if not all counties				
					var lat = $(sel.options[sel.selectedIndex]).attr('lat');
					var lon = $(sel.options[sel.selectedIndex]).attr('lon');					
					var point  = new GLatLng(lat, lon);
					dragMarker(point);
					setCoordes(point);
					
				}else{
					startMap();
					GEvent.clearListeners(map, "click") ;
				}
			}catch (e) {}
			
		});
		

		if (lat != '' && lon != '') {
			var startingPoint  = new GLatLng(lat, lon);
			dragMarker(startingPoint);			
		} else {
			// No close info window
			startMap();
		}
		

	}
	
	
	
	function startMap(){
		map.clearOverlays();
		map.setCenter(irlLatLng, 6);
		map.openInfoWindow(map.getCenter(),selectLocMsg,{noCloseOnClick:true});
		map.disableDragging();
		map.disableScrollWheelZoom();
		map.doubleClickZoomEnabled();
		map.removeControl(controlOverview);
		map.removeControl(controlControls);
	}
	
	function dragMarker(startingPoint){
	
		map.setCenter(startingPoint, 9);
		map.enableDragging();
		map.enableScrollWheelZoom();
		map.addControl(controlOverview);
		map.addControl(controlControls);
		map.clearOverlays();
		var marker = new GMarker(startingPoint, markerOptions);
		
		GEvent.addListener(marker, "dragstart", function() {
			map.closeInfoWindow();
		});
		GEvent.addListener(marker, "dragend", function() {
			marker.openInfoWindow(saveMsg);
			setCoordes(marker.getPoint());
		});
		GEvent.addListener(map, "click", function(overlay, clickLatLng, overlayLatLng) {
			if (overlay == null) {
				marker.setPoint(clickLatLng);
				setCoordes(clickLatLng);
				marker.openInfoWindowHtml(saveMsg);
			}
		});
		
		map.addOverlay(marker);
		marker.openInfoWindow(dragMsg);

		GEvent.addListener(map, "zoomend", function(){
			if(markerLatLng!= ''){
				//map.setCenter(markerLatLng);
			}
		});
	
	
	}
	
	function setCoordes(latLng) {	
		// set lat and lng
		document.getElementById("longtitude").value=latLng.lng();
		document.getElementById("latitude").value=latLng.lat();
		markerLatLng = latLng;
	}
	


	
	
});
</script>

<tr>
<td><label>Map Location:</label></td>
<td>
<div class="photo_box">
<div id="gmap" style="width:400px; height:400px; overflow:hidden;"></div>
</div>
<input name="latitude" id="latitude" type="hidden" value="<?= @$form_values['latitude'] ?>" />
<input name="longtitude" id="longtitude" type="hidden" value="<?= @$form_values['longtitude'] ?>" />
</td>
</tr>

<? } ?>


<tr>
<td><label>Advert Title:</label></td>
<td><input type="text" name="title" value="<?= $form_values['title'] ?>" class="form_create_text_ex_long" maxlength="35"  title="Brief description" /><img src="/images/icon_question.png" width="11" height="19" class="icon_qm" title="" alt="Advert title::Please give a short descriptive title for your advert. e.g. &quot;2 yr old black Labrador&quot;" /></td>
</tr>
 
 
<tr>
<td><label>Description:</label></td>
<td>

<table>
<tr>
<td style="padding: 0 5px 0 0">
<script type="text/javascript">
$(function(){
	var area_field  = $('textarea[name=description]').get(0);
	var limit_field = $(':input[name=countdown]').get(0);
	limitText(area_field, limit_field, 900);
});
</script> 
<textarea name="description" class="form_create_textarea_long" onkeydown="limitText(this.form.description,this.form.countdown,900);" onkeyup="limitText(this.form.description,this.form.countdown,900);" ><?= $form_values['description'] ?></textarea>
</td>
<td style="padding: 0; vertical-align: bottom">
<span class="form_create_label_char_cnt">Characters left: <input readonly="readonly" name="countdown" size="3" value="900" class="form_create_text_char_cnt" type="text"></span>
</td>
</tr>
</table>

</td>
</tr>
<?
if(($form_values['ad_type_group'] == 'home')){
?>
<tr id="pricediv" <? if ($form_values['ad_type'] != "s") { echo "style='display:none;'"; }  ?>>
<td><label>Price:</label></td>
<td>&euro; <input type="text" name="price" value="<?= $form_values['price'] ?>" class="form_create_text_price" /></td>
</tr>
<? } ?>
</table>



<br />





<h3 title="Contact Details">Contact Details</h3>




<table class="libra">

<tr>
<td width="150"><label>Phone no:</label></td>
<td width="170"><?= $user_values['telephone']; ?></td>
<td><input type="radio" name="phone_no_disp" id="phone-disp-this" value="std" <?= checked($form_values['phone_no_disp'],'std') ?> /> <label class="label_normal">Display this phone no.</label></td>
</tr>

<tr>
<td><label>Alternate phone no:</label></td>
<td><input type="text" name="cont_phone_no_alt" value="<?= $form_values['cont_phone_no_alt'] ?>" <? if (checked($form_values['phone_no_disp'],'std')) echo "disabled=\"disabled\"" ?> class="form_create_text_long" /></td>
<td><input type="radio" name="phone_no_disp" id="phone-disp-dif" value="alt" <?= checked($form_values['phone_no_disp'],'alt') ?> /> <label class="label_normal">Display a different phone no.</label></td>
</tr>

<tr>
<td><label>Email:</label></td>
<td><?= $user_values['email'] ?></td>
<td><input type="checkbox" name="cont_email_display" <?= checked($form_values['cont_email_display'],'1') ?> value="1"  /> <label class="label_normal">Allow contact by email?</label><img src="/images/icon_question.png" width="11" height="19" class="icon_qm" title="" alt="Allow contact by email?::Select &quot;Allow contact by email&quot; so users will be able to send you emails about your ad. Your email address will NOT be displayed on the website." /></td>
</tr>

</table>


<br />


<h3 title="Terms &amp; Conditions">Terms &amp; Conditions</h3>




<table class="libra">

<tr>
<td width="150"><label>Terms &amp; Conditions:</label></td>
<td><input type="checkbox" name="tnc" <?= checked($form_values['tnc'],'true') ?> value="true" /> <span>I agree to the <a href="/advertising_terms.php" onclick="return openPopWindow('/advertising_terms.php','','scrollbars=yes,width=400,height=570')">Advertising Terms &amp; Conditions</a></span></td>
</tr>

</table>


<br />


<?

// Set the URL for the back button
if($_SESSION['advert']['type'] == "new"){
	$back_button_url = "/place_ad.html";
}

if($_SESSION['advert']['type'] == "edit"){
	$back_button_url = "/myads/";
}

?>



<div class="a_center">
<a href="<?= $back_button_url ?>"><img src="/images/button_back_grey.png" class="form_button" /></a>
<input type="image" src="/images/button_next_grey.png" value="submit"  class="form_button" />
</div>





</form>



</div>
</div>

</div>
<!-- End col -->










<!-- Start right col -->
<div class="col_180">

<div class="box_grey_180_cap">
<div class="box_grey_180_shoe">

<p>Please make the description of your advert as accurate and informative as possible.</p>

<p>It is important that the email address and contact number given is correct otherwise people will not be able to contact you.</p>

<p>All adverts placed on Pets.ie are subject to our <a href="#" onclick="return openPopWindow('/advertising_terms.php','','scrollbars=yes,width=400,height=570')">Terms &amp; Conditions</a>.</p>



</div>
</div>

</div>
<!-- End right col -->



<div class="clearing"></div>


</div>
</div>